<template>
    <div class="iot_title">猜你喜欢</div>

    <div class="iot_guess">
      <router-link
        v-for="items in guesslikeList"
        :key="items.id"
        class="iot_item"
        :to="`/pages/goods/detail?id=${items.id}`">
        
      
        
       
         <img
             class="iot_image"
             :src="items.picture"
             alt="商品图片"
             style="object-fit: cover; width: 100%; height: auto;"
         />
         <div class="iot_name">{{ items.name }}</div>
         <div class="iot_price">
           <span class="iot_small">¥</span>
           <span class="iot_number">{{ items.price }}</span>
         </div>
      </router-link>
    </div>

  <div class="iot_loadingtext">正在加载.....</div>
</template>

<style scoped>
.iot_title{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #f7f7ff;
}

.iot_guess {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 16px;
}

.iot_item {
  width: calc(50% - 8px); 
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  text-decoration: none;
}



.iot_image {
  width: 100%;
  height: 150px; 
}

.iot_name {
  color: black;
  padding: 12px;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iot_price {
  padding: 0 12px 12px;
  display: flex;
  align-items: center;
}

.iot_small {
  font-size: 12px;
  color: #ff4d4f;
  margin-right: 4px;
}

.iot_loadingtext {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}
.iot_number{
  color: #ff4d4f;
  text-decoration: none;
}

</style>

<script setup>
import { RouterLink } from 'vue-router';
import { getGuesslikeAPI } from '@/apis/guesslike';
import { onMounted,ref } from 'vue';

const guesslikeList=ref([])

const getGuesslike=async()=>{
  const res=await getGuesslikeAPI()
  console.log(res)
  guesslikeList.value=res.result.items
}



onMounted(()=>getGuesslike())
</script>
